import React from 'react'
import styleIndex from './style.index'
import { Table, Link } from '../../ui-components'
import util from '../../util'
import { presets, StaggeredMotion, Motion, spring } from 'react-motion'
import { map as tableMap } from '../../ui-components/table'
import KudoItem from '../../containers/home/KudoItem'

export default
class UserIndex extends React.Component {

  renderSelfIntro() {
    const { profileFieldVOs } = this.props
    if (!profileFieldVOs || !profileFieldVOs.length) return null
		const selfIntro = util.find(profileFieldVOs, item => item.referenceName === 'selfIntro').dataValue
    if (selfIntro) {
      return (
        <div className={styleIndex.intro}>
          <div>{ selfIntro.split(/\n{1}/).map((v, i) => <p key={i}>{v}</p>) }</div>
        </div>
      )
    } else {
      return (
        <Motion defaultStyle={{ opacity: 0 }} style={{ opacity: spring(1) }}>
          {
            ({ opacity }) => (
              <div style={{ opacity, width: '220px', margin: 'auto', textAlign: 'center', marginTop: '24px' }}>
                <img width="140" height="140" src={`/${util.getImagePath()}/default/intro.png`}/>
                <div style={{ fontSize: '18px', color: '#999', marginTop: '20px' }}>
                  {
                    this.props.isSelf? '您还没有撰写个人介绍': '这位同事没有填写个人介绍'
                  }
                </div>
                {
                  this.props.isSelf?
                  <a href="#/personal/basic" style={{ textDecoration: 'none', cursor: 'pointer', marginLeft: '43px', width: '130px', height: '40px', color: '#777', fontsize: '16px', border: '1px solid #ddd', display: 'flex', alignItems: 'center', justifyContent: 'center',  marginTop: '15px' }}>立即撰写</a>
                  : null
                }
              </div>
            )
          }
        </Motion>
      )
    }
  }
  renderKudo = (list) => {
    return (
      <div>
        <h2>获得的赞赏</h2>
        <div className={styleIndex.intro}>
          {
            list.map((v, i) => {
              return (
                <div className={styleIndex['kudo-item']} key={i}>
                  <KudoItem item={v} />
                  <aside><span>&times;</span> {v.receivedCount||1}</aside>
                </div>
              );
            })
          }
        </div>
      </div>
    )
  }
	render() {
		const tableConfig = {
			model: {
				fullName: '姓名',
				team: '团队',
				jobTitleName: '职位'
			},
			map: {
        team: (_, item) => (item.teamVO || {}).teamName || '',
        fullName: tableMap.fullName
			}
		}
    const {
      profile,
      kudos,
    } = this.props;
    const {
      userId
    } = profile || {};
    const {
      reawrdsById
    } = kudos;
    const kudoObj = reawrdsById[userId] || {};
    let teamList = [];
    let userList = [];
    if(typeof kudoObj === 'object') {
      userList = kudoObj.personalRewardMedalVOs || [];
      teamList = kudoObj.teamRewardMedalVOs || [];
    }
		return (
			<div className={styleIndex.root}>
        {
          userList.length || teamList.length 
          ? this.renderKudo([...userList,...teamList])
          : null
        }
				
        <div>
          <h2>个人介绍</h2>
          { this.renderSelfIntro() }
        </div>
        {
          this.props.reportees?
          <div>
            <h2>
              <span>下属</span>
              <span>{this.props.reportees.length}人</span>
            </h2>
            <div>
              <Table 
                {...tableConfig}
                data={this.props.reportees}
              />
            </div>
          </div>
          : null
        }
			</div>
		)
	}
}
